<template>
	<view class="loading-success">
		<view class="loading-box">
			<view style="padding: 10px; display: flex; justify-content: center">
				<view class="loader"></view>
				<view class="success-text"><slot></slot></view>
			</view>
		</view>
	</view>
</template>

<script setup></script>

<style lang="scss" scoped>
.loading-success {
	// background-color: #00000055;
	background-color: pink;
	.loading-box {
		position: fixed;
		top: 50%;
		left: 50%;
		z-index: 99;
		transform: translate(-50%, -50%);
		// background-color: #00000095;
		width: 450rpx;
		height: 450rpx;
		backdrop-filter: blur(5rpx);
		border-radius: 35rpx;
		.loader {
			position: absolute;
			top: 50rpx;
			width: 120px;
			height: 120px;
			border-radius: 50%;
			border: 7rpx solid #f3caa1;
			border-left-color: #e57301;
			animation: animation_collect 1s linear 1 both;
			// 圆圈动画代码
			@keyframes animation_collect {
				0% {
					transform: rotate(270deg);
					border-left-color: #e57301;
				}
				25% {
					border-left-color: #e57301;
				}
				50% {
					border-left-color: #e57301;
				}
				75% {
					border-left-color: #e57301;
				}
				100% {
					border-left-color: #f3caa1;
					transform: rotate(0deg);
				}
			}
			&::before {
				position: absolute;
				content: '';
				top: 50%;
				left: 30%;
				border: 15rpx solid #e57301;
				border-left-width: 0;
				border-bottom-width: 0;
				transform: scaleX(-1) rotate(135deg);
				transform-origin: left top;
				animation: animation_true 0.5s 1s linear 1 both;
				opacity: 0;
			}

			@keyframes animation_true {
				0% {
					opacity: 0;
					width: 0px;
					height: 0px;
				}
				33% {
					opacity: 1;
					width: 20px;
					height: 0px;
				}
				100% {
					opacity: 1;
					width: 20px;
					height: 40px;
				}
			}
		}
		.success-text {
			position: absolute;
			bottom: 60rpx;
			font-weight: bold;
			font-size: 45rpx;
			color: #e57301;
		}
	}
}
</style>
